<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/avalon.modern.js"></script>
    <script src="../js/jquery-1.12.3.js"></script>
    <script>
        var vm = avalon.define({
            $id:'student',
            classNumber:'软件03班',
            name:'StudentName',
            year:2016,
            friends:[
                {Name:'1'},
                {Name:'2'},
                {Name:'3'},
                {Name:'4'},
                {Name:'5'},
                {Name:'6'},
                {Name:'7'}
            ],
            birthday:'1992/03/09',
            weight:120,
            current:0,
            sex:0,
            walk:function (length) {
                vm.weight -= (length/100).toFixed()*0.5
            },
            eat:function (weight) {
                vm.weight += (weight/100).toFixed()*0.5
            },
            grow:function (year) {
                vm.year+=year
            }
        });
        window.setInterval(function(){
            vm.sex=(Math.random()*100).toFixed()
            console.log(vm.sex)
        },1000)
    </script>
</head>
<!--这个是把整个body标签中的内容纳入avalon中的student对象管理-->
<body ms-controller="student">
<!--通过{{属性名称或计算方式}}来绑定属性值和显示内容-->
姓名：{{name}}<br>
性别：<span  ms-css-font-size="sex" ms-attr-display="sex%2" style="font-size: 100px;">女性</span><span ms-if="sex%2==1">男性</span>
<br>
班级：{{classNumber}}<br>
年级：<span>{{year}}</span><br>
年级：{{year}}<br>
年龄：{{ (new Date()).getFullYear() - birthday.substr(0,4) }}<br>
出生年月：{{birthday}}<br>
体重：{{weight}}<br>
<!--这个是绑定点击事件-->
<button ms-click="walk(100)">走100米(减重0.5)</button>
<button ms-click="eat(100)">吃100克米饭(增重0.5)</button>
<br>
<input type="text" ms-duplex="current">
当前准备吃:{{current}}克食物
<button ms-click="eat(current)">吃</button>
<input type="text" ms-duplex="year">
长大：{{year}}岁
<button ms-click="grow(year)">长大</button>
<br>
朋友列表 <br>
<table border="1px">
    <thead>
        <tr>
            <td>序号</td>
            <td>姓名</td>
        </tr>
    </thead>
    <tbody>
    <!--这个是循环-->
        <tr ms-repeat="friends">
            <td>{{$index+1}}</td>
            <td>{{el.Name}}</td>
        </tr>
    </tbody>
</table>
</body>
</html>